import { Component, Input, OnInit } from '@angular/core';
import { ChartConfiguration } from 'chart.js';
import { TranslateService } from '@ngx-translate/core';
import { VulnerabilitiesService } from '../vulnerabilities.service';

@Component({
  selector: 'app-vulnerability-charts',
  templateUrl: './vulnerability-charts.component.html',
  styleUrls: ['./vulnerability-charts.component.scss'],
})
export class VulnerabilityChartsComponent implements OnInit {
  @Input() complianceDist!: any;
  topVulnerableNodesChartData!: ChartConfiguration<'bar', number[], string[]>;
  topVulnerableImagesChartData!: ChartConfiguration<'bar', number[], string[]>;
  barChartColors = {
    high: '#ef5350',
    medium: '#ff9800',
  };

  constructor(
    private translate: TranslateService,
    private vulnerabilitiesService: VulnerabilitiesService
  ) {}

  ngOnInit() {
    this.topVulnerableNodesChartData = {
      options: {
        indexAxis: 'y',
        elements: {
          bar: {
            borderWidth: 2,
          },
        },
        maintainAspectRatio: false,
        plugins: {
          legend: {
            display: true,
            position: 'top',
          },
          title: {
            display: true,
            text: 'Top Vulnerable Nodes',
          },
        },
      },
      data: {
        labels: this.vulnerabilitiesService.topNodes.map(n => n[0]),
        datasets: [
          {
            data: this.vulnerabilitiesService.topNodes.map(n => n[1].high),
            label: 'High',
            backgroundColor: this.barChartColors.high,
            hoverBackgroundColor: this.barChartColors.high,
            barThickness: 4,
            borderWidth: 0,
            barPercentage: 0.04,
          },
          {
            data: this.vulnerabilitiesService.topNodes.map(n => n[1].medium),
            label: 'Medium',
            backgroundColor: this.barChartColors.medium,
            hoverBackgroundColor: this.barChartColors.medium,
            barThickness: 4,
            borderWidth: 0,
            barPercentage: 0.04,
          },
        ],
      },
      type: 'bar',
    };

    this.topVulnerableImagesChartData = {
      options: {
        indexAxis: 'y',
        elements: {
          bar: {
            borderWidth: 2,
          },
        },
        maintainAspectRatio: false,
        plugins: {
          legend: {
            display: true,
            position: 'top',
          },
          title: {
            display: true,
            text: 'Top Vulnerable Images',
          },
        },
      },
      data: {
        labels: this.vulnerabilitiesService.topImages.map(n => n[0]),
        datasets: [
          {
            data: this.vulnerabilitiesService.topImages.map(n => n[1].high),
            label: 'High',
            backgroundColor: this.barChartColors.high,
            hoverBackgroundColor: this.barChartColors.high,
            barThickness: 4,
            borderWidth: 0,
            barPercentage: 0.04,
          },
          {
            data: this.vulnerabilitiesService.topImages.map(n => n[1].medium),
            label: 'Medium',
            backgroundColor: this.barChartColors.medium,
            hoverBackgroundColor: this.barChartColors.medium,
            barThickness: 4,
            borderWidth: 0,
            barPercentage: 0.04,
          },
        ],
      },
      type: 'bar',
    };
  }
}
